/* eslint-disable @typescript-eslint/no-explicit-any */
// import React from 'react'
import { Suspense } from 'react';
import { Avatar, Breadcrumb, Button, Layout, Menu, Select, theme } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { elser } from './router';
import { useTranslation } from 'react-i18next';
const { Header, Content, Sider } = Layout;

function App() {
  const {
    token: { /* colorBgContainer */ borderRadiusLG },
  } = theme.useToken();
  const { t, i18n } = useTranslation()
  const change = (val: any) => {
    i18n.changeLanguage(val)
  }
  const nav = useNavigate()
  const { pathname } = useLocation()
  const home = (arr: any) => {
    return arr.map((item: any) => {
      return {
        key: item.path,
        label: t(`${item.title}`)
      }
    })
  }
  const items = home(elser)
  const img = localStorage.getItem('img')
  const username = localStorage.getItem('user')
  return (
    <div>
      <Layout style={{ minHeight: '100vh' }} >
        <Header style={{ display: 'flex', alignItems: 'center', background: 'pink' }} >
          <div className="demo-logo" />
          <div><Avatar src={img} /> {username}</div>
          <Menu
            theme='light'
            onClick={({ key }) => nav(key)}
            mode="horizontal"
            defaultSelectedKeys={[pathname]}
            items={items}
            style={{ flex: 1, minWidth: 0, position: 'absolute', right: '400px', background: 'pink' }}
          />
          <div style={{ position: 'fixed', right: 0 }}>
            {t('change')}<Select
              defaultValue="中文"
              onChange={change}
              style={{ width: 120 }}
              options={[
                { value: 'zh', label: '中文' },
                { value: 'en', label: 'English' },
              ]}
            />
            <Button type='link'>{t('click')}</Button>
          </div>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fcf1f0' }}>
            <p style={{ padding: '20px 0 0 100px', fontSize: '18px', color: 'red' }}>{t('info')}</p>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Breadcrumb
              items={[{ title: 'Home' }, { title: 'User' }]}
              style={{ margin: '16px 0' }}
            />
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: '#fcf1f0',
                borderRadius: borderRadiusLG,
              }}
            >
              <Suspense fallback={<>...laoding...</>}>
                <Outlet />
              </Suspense>
            </Content>
          </Layout>
        </Layout>
      </Layout>

    </div>
  )
}

export default App


